<template>
  <div class="flex-style">
    <el-menu
      :default-active="activeIndex"
      class="el-menu-demo"
      mode="horizontal"
      @select="handleSelect"
      style="width: 100%"
    >
      <el-menu-item index="1"><router-link to="/about">酒店首页</router-link></el-menu-item>

      <el-menu-item index="2"><router-link to="/yiqing">疫情查看</router-link></el-menu-item>
      <el-menu-item index="3"><router-link to="/login">入住用户帮助</router-link></el-menu-item>
    </el-menu>
    <!-- <el-card class="box-card" style="width: 400px;margin-top: 20px;">
      <div slot="header" class="clearfix">
        <span>卡片名称</span>
      </div>
    </el-card>
    <el-card class="box-card" style="width: 400px;margin-top: 20px;">
      <div slot="header" class="clearfix">
        <span>卡片名称</span>
      </div>
    </el-card>
    <el-card class="box-card" style="width: 400px;margin-top: 20px;">
      <div slot="header" class="clearfix">
        <span>卡片名称</span>
      </div>
    </el-card>
    <el-card class="box-card" style="width: 400px;margin-top: 20px;">
      <div slot="header" class="clearfix">
        <span>卡片名称</span>
      </div>
    </el-card> -->
  </div>
</template>
<script>
export default {
  name: "room",
  data() {
    return {
       activeIndex: '1',
    };
  },
  methods:{
    handleSelect(){

    }
  }
};
</script>
<style scoped>
.text {
  font-size: 14px;
}

.item {
  margin-bottom: 18px;
}

.clearfix:before,
.clearfix:after {
  display: table;
  content: "";
}
.clearfix:after {
  clear: both;
}

.box-card {
  width: 480px;
}
.flex-style {
  display: flex;
  flex-wrap: wrap;
}
</style>